<template>
  <q-dialog
    v-model="visible"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-warning row justify-center items-center content-center">
      <q-bar
        class="full-width justify-end bg-transparent"
        style="height: 50px; line-height: 50px"
      >
        <q-btn
          round
          flat
          color="negative"
          icon="close"
          size="20px"
          v-close-popup
        />
      </q-bar>
      <q-card-section
        class="row justify-center items-center content-center"
        style="height: calc(100vh - 50px)"
      >
        <q-card-section class="justify-center">
          <q-spinner-orbit color="negative" size="20rem" />
        </q-card-section>
        <q-card-section
          style="width: 25rem"
          class="justify-center row q-gutter-lg"
        >
          <div class="text-h2 text-bold text-center text-negative">
            {{ $t(lang + "急停状态") }}
          </div>
          <div
            class="text-negative text-bold text-h5 q-pa-md text-center"
            style="
              backdrop-filter: blur(3px) brightness(80%);
              background: transparent;
              border-radius: 1rem;
            "
          >
            {{ $t(lang + "将急停按钮按顺时针方向旋开以继续使用机器人") }}
          </div>
        </q-card-section>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";

const lang = "indexPage.deviceStop.";
const visible = ref(false);
defineExpose({ visible });
</script>
